<script type="text/javascript">
	var ImageListMixin = {
		methods:{
			ImagesListlayoutCompute(){
				var self = this;
				if(self.ParamImages.type == 'refresh' || !self.ParamImages.data.length){
					self.ParamImages.imageList.perpage = 0;
					var documentW = document.body.clientWidth;
					var boxWidth = documentW-8;
					document.querySelector('#imgContainer').style.width = boxWidth +'px';
					var columns = 0;
					if(documentW>=1024){
						columns = 5;
					}else if(documentW>=992){
						columns = 4;
					}else if(documentW>=768){
						columns = 3;
					}else{
						columns = 2;
					}
				
					self.ParamImages.imageList.maxNewLeft = 0;
					self.ParamImages.imageList.maxNewtop = 0;
					self.ParamImages.imageList.fcolumns = 1;
					self.ParamImages.imageList.boxHeight = 0;
					self.ParamImages.imageList.StoreImgdatas = [];
					self.ParamImages.Newdatas = [];
					self.ParamImages.imageList.columns = columns;
					self.ParamImages.imageList.newWidth = (boxWidth-(columns*self.ParamImages.imageList.Margin-self.ParamImages.imageList.Margin)) / columns;
					self.ParamImages.imageList.newHeight = 2 / 3 * self.ParamImages.imageList.newWidth;
					
					var OtherHeight = 0;
					if(!self.ParamImages.checked){
						OtherHeight = 30;
					}
					if(self.ParamSort.showinformation.value.indexOf('name')>-1 || self.ParamSort.showinformation.value.indexOf('extension')>-1){
						OtherHeight = 45;
					}
					if(self.ParamSort.showinformation.value.indexOf('other')>-1){
						OtherHeight += 20;
					}
					self.ParamImages.imageList.OtherHeight = OtherHeight;
					
					
				}
				
			
				if(!self.ParamImages.data.length){
					document.querySelector('#imgContainer').style.height = 0;
					return false;
				}
				
				
				var arr = [];
				var i = 0;
				for(var index = self.ParamImages.imageList.perpage; index < self.ParamImages.data.length;++index){
					var item = JSON.parse(JSON.stringify(self.ParamImages.data[index]));
					arr[i] = item;
					arr[i]['pwidth'] = self.ParamImages.imageList.newWidth;
					arr[i]['pheight'] = self.ParamImages.imageList.newHeight;
					arr[i]['ptop'] = self.ParamImages.imageList.maxNewtop;
					arr[i]['pleft'] = self.ParamImages.imageList.maxNewLeft;
					arr[i]['pbottom'] = self.ParamImages.imageList.maxNewtop + self.ParamImages.imageList.newHeight+self.ParamImages.imageList.OtherHeight;
					self.ParamImages.imageList.maxNewLeft += self.ParamImages.imageList.newWidth+self.ParamImages.imageList.Margin;
					self.ParamImages.imageList.fcolumns++;
					if(self.ParamImages.imageList.fcolumns > self.ParamImages.imageList.columns){
						self.ParamImages.imageList.maxNewLeft = 0;
						self.ParamImages.imageList.maxNewtop += self.ParamImages.imageList.newHeight+self.ParamImages.imageList.Margin+self.ParamImages.imageList.OtherHeight;
						self.ParamImages.imageList.fcolumns = 1;
						self.ParamImages.imageList.boxHeight = self.ParamImages.imageList.maxNewtop;
					}
					i++;
				}
				self.ParamImages.imageList.perpage = self.ParamImages.data.length;
				if(self.ParamImages.type == 'append'){
					self.ParamImages.imageList.StoreImgdatas.push.apply(self.ParamImages.imageList.StoreImgdatas,arr);
				}else{
					self.ParamImages.imageList.StoreImgdatas = arr;
				}
				if(self.ParamImages.imageList.fcolumns>1&&self.ParamImages.imageList.fcolumns<self.ParamImages.imageList.columns+1){
					self.ParamImages.imageList.boxHeight += self.ParamImages.imageList.newHeight+self.ParamImages.imageList.OtherHeight;
				}
				document.querySelector('#imgContainer').style.height = (self.ParamImages.imageList.boxHeight+60)+'px';
				self.ImagesLayoutScrollShow()
			}
		}
	};
</script>